<template>
  <main>
    <div class="login">
      <h1>欢迎登录</h1>
      <div class="form" v-show="mode !== 3">
        <div class="item">
          <span class="iconfont icon-fangdajing"></span>
          <input
            type="text"
            placeholder="手机号码"
            v-model="phone"
            v-show="mode == 1"
          />
          <input
            type="text"
            placeholder="网易邮箱"
            v-model="phone"
            v-show="mode == 2"
          />
        </div>
        <div class="item">
          <span class="iconfont icon-fangdajing"></span>
          <input type="password" placeholder="密码" v-model="password" />
        </div>
        <div class="item" v-show="mode == 1">
          <span class="iconfont icon-fangdajing"></span>
          <input type="text" placeholder="验证码" v-model="code" />
          <button class="getCode" @click="getCode">发送</button>
        </div>
        <div class="item">
          <div class="submit" @click="submit">提交</div>
        </div>
      </div>
      <div class="qr-code" v-show="mode === 3">
        <img src="" alt="" ref="img" />
      </div>
      <div class="other">
        <span class="iconfont icon-youxiang" @click="mode = 2"></span>
        <span class="iconfont icon-erweima" @click="qrkey"></span>
        <span class="iconfont icon-shouji" @click="mode = 1"></span>
      </div>
    </div>
  </main>
</template>

<script>
import {
  getCaptchaSent,
  getCaptchaVerify,
  getLoginCellphone,
  getmailbox,
  getQrcode,
  getGenerateQr,
  getJudge,
} from "../../api/login";
import { Toast } from "vant";
export default {
  data() {
    return {
      phone: "",
      password: "",
      code: "",
      mode: 1, //登录方式
      key: "",
    };
  },
  methods: {
    getCode() {
      // 1.验证手机号码
      let reg =
        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (!reg.test(this.phone)) {
        Toast("请输入正确手机号码");
        return;
      }
      // 请求接口验证码
      getCaptchaSent({ phone: this.phone }).then((data) => {
        if (data.data) {
          Toast("验证码发送成功");
        } else {
          Toast("验证码发送失败");
        }
      });
    },
    submit() {
      if (this.mode === 1) {
        let regCode = /^[0-9]{4}$/;
        // 验证码
        if (!regCode.test(this.code)) {
          Toast("请输入正确验证码");
          return;
        }
        // 1.验证手机号码
        let regPhone =
          /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/;
        if (!regPhone.test(this.phone)) {
          Toast("请填写正确信息");
          return;
        }
        // 密码
        let regPassword = /^[a-zA-Z]\w{5,17}$/;
        if (!regPassword.test(this.password)) {
          Toast("请填写正确信息");
          return;
        }
        getCaptchaVerify({ phone: this.phone, captcha: this.code })
          .then((data) => {
            if (data.data) {
              // 验证手机密码
              getLoginCellphone({
                phone: this.phone,
                password: this.password,
              }).then((info) => {
                console.log(info);
                Toast("登陆成功");
                window.localStorage.setItem("token", info.token);
                window.localStorage.setItem("uid", info.account.id);
                //登陆成功跳回个人中心页面
                // this.$router.push("/userInfo");
                this.$router.push("/recommend");
              });
            } else {
              Toast("请填写正确信息");
            }
          })
          .catch(() => {
            Toast("请填写正确信息");
          });
      } else if (this.mode === 2) {
        // 1.验证网易邮箱
        let regPhone =
          /^[A-Za-z]\w{5,17}@(vip\.(126|163|188)\.com|163\.com|126\.com|yeach\.net)/;
        if (!regPhone.test(this.phone)) {
          Toast("请填写正确信息");
          return;
        }
        // 密码
        let regPassword = /^[a-zA-Z]\w{5,17}$/;
        if (!regPassword.test(this.password)) {
          Toast("请填写正确信息");
          return;
        }
        getmailbox({ email: this.phone, password: this.password }).then(
          (data) => {
            if (data.code === 200) {
              Toast("登陆成功");
              window.localStorage.setItem("token", data.token);
              window.localStorage.setItem("uid", data.account.id);
              //登陆成功跳回个人中心页面
              this.$router.push("/userInfo");
            } else {
              Toast("账号或密码错误");
            }
          }
        );
      }
    },
    async qrkey() {
      this.mode = 3;
      this.key = await getQrcode({ timerstamp: Date.now() });
      let keyimg = await getGenerateQr({
        key: this.key.data.unikey,
        timerstamp: Date.now(),
        qrimg: true,
      });
      this.$refs.img.src = keyimg.data.qrimg;
      let timer = setInterval(async () => {
        const statusRes = await getJudge({ key: this.key.data.unikey });
        if (statusRes.code === 800) {
          Toast("二维码已过期,请重新获取");
          clearInterval(timer);
        } else if (statusRes.code === 803) {
          // 这一步会返回cookie
          clearInterval(timer);
          Toast("登陆成功");
          window.localStorage.setItem("token", statusRes.cookie);
          // window.localStorage.setItem("uid", data.account.id);
          //登陆成功跳回个人中心页面
          this.$router.push("/userInfo");
        }
      }, 3000);
    },
  },
  created() {},
};
</script>

<style lang="less" scoped>
main {
  height: 100%;
}
.login {
  background-color: #d4473c;
  width: 100%;
  height: 100%;
  color: #fff;
}
h1 {
  font-size: 48px;
  text-align: center;
  height: 48px;
  padding: 150px 0 40px 0;
}
.form {
  .item {
    width: 76%;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    background-color: #f47378;
    border-radius: 30px;
    margin-bottom: 12px;
    input {
      background-color: transparent;
      border: 0px;
      outline: none;
      text-indent: 0.5em;
      font-size: 14px;
      color: #fff;
    }
    span {
      font-size: 20px;
      margin-left: 10px;
      display: inline-block;
      vertical-align: middle;
    }
    .getCode {
      border: 1px solid #fff;
      height: 20px;
      line-height: 20px;
      width: 50px;
      border-radius: 20px;
      font-size: 12px;
      color: #808080;
      float: right;
      margin: 5px;
    }
    .submit {
      font-size: 15px;
      background-color: #fff;
      text-align: center;
      color: #d4473c;
      border-radius: 15px;
    }
  }
}
.other {
  display: flex;
  justify-content: space-around;
  padding-top: 15px;
  & > span {
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 37px;
    border-radius: 50%;
    border: 1px solid #fff;
  }
}

.qr-code {
  width: 100%;
  & > img {
    margin: 0 auto;
  }
}
</style>